<!DOCTYPE html>
<html>
<style type="text/css">
#main {
	width: 400px;
	height: 600px;
	background: gray;
	border: 2px solid green;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#container {
	width: 100%;
	height: 600px;
	position: relative;
	top: -150px;
}

.row {
	width: 100%;
	height: 150px;
}

.cell {
	width: 100px;
	height: 150px;
	float: left;
}

.black {
	background: black;
}

div {
	float: left;
}
</style>

<head>
<meta charset="UTF-8">
<meta>
<title>别踩黑块</title>
</head>

<body>
	<div>&emsp;&emsp;&emsp;&emsp;&emsp;</div>
	<div>&emsp;&emsp;&emsp;&emsp;&emsp;</div>
	<div>&emsp;&emsp;&emsp;&emsp;&emsp;</div>
	<div>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</div>
	<!--没办法用了一堆空格来把div挤过去。。。。 -->
	
	<div align="center">
		<button onclick="change()">
			<h3>开始游戏</h3>
		</button>
	</div>
	<div id="main">
		<div id="container"></div>
	</div>
		<button onclick="addSpeed()">
			<h2>手动加速</h2>
		</button>
	<h3 id="score" style="color: red;">0</h3>
	<div align="right"><a  href="/BlogSpace/games">返回列表</a></div>
</body>

<script type="text/javascript">
	var time = null; //定时器
	var speed = 2; //初始速度
	var state = 0; //定义游戏状态
	//初始化
	function init() {
		for (var i = 0; i < 4; i++) {
			crow();
		}
		//当游戏开始时才能点击
		$('main').onclick = function(ev) {
			if (ev.target.className.indexOf('black') == -1) {
				clearInterval(time);
				state = 0; //设置游戏状态为未开始
				alert('辣鸡');
			} else {
				ev.target.className = 'cell';
				ev.target.parentNode.isPass = 1; //给点击过的cell的父节点row增加属性
				scores();
			}
		}
	}
	/*
	创建div.row块  div.classes ='row'
	 */
	function crow() {
		var row = cdiv('row');
		var arr = RandomBlack();//随机数组有一个属性为black
		var con = $('container');
		for (var i = 0; i < 4; i++) {
			row.appendChild(cdiv(arr[i]));
		}
		if (con.firstChild == null) {
			con.appendChild(row);
		} else {
			con.insertBefore(row, con.firstChild);
		}
	}

	//创建div块
	function cdiv(className) {
		var div = document.createElement('div');
		div.className = className;
		return div;
	}

	//创建随机1234 其中一个为黑块
	function RandomBlack() {
		var arr = [ 'cell', 'cell', 'cell', 'cell' ];
		var i = Math.floor(Math.random() * 4); //随机数取整
		arr[i] = 'cell black';
		return arr;
	}

	//移动
	function move() {
		if (state == 0) {
			//游戏开始 或结束先结束定时器等用户按 开始游戏
			clearInterval(time);
		}
		var con = $('container');
		var top = parseInt(window.getComputedStyle(con, null)['top']);
		top += speed; //2,3,5,10
		con.style.top = top + 'px';
		if (top == 0) {
			crow(); //创建一行
			con.style.top = '-150px';
			del(); //删除最后一行
		}
	}
	//删除最后的节点元素
	function del() {
		var con = $('container');
		if (con.lastChild.isPass != 1) {
			clearInterval(time);
			state = 0; //设置游戏状态为未开始  这里有点问题 state 好像在 重启定时器之后 重置了 
			alert('好玩不?');
		}
		con.removeChild(con.lastChild);
	}

	//计分
	function scores() {
		$('score').innerHTML = parseInt($('score').innerHTML) + 1;
	}

	//控制加速
	function addSpeed(){
		//意外发现重启定时器可以加速 哈哈哈哈 
		time = window.setInterval('move()', 10);
	}
	 
	function $(id) {
		return document.getElementById(id);
	}

	function change() {
		state = 1;
		//重启定时器
		time = window.setInterval('move()', 10);
	}
	init();
</script>
</html>